<template>
  <div class="personal">
    <!-- 操作栏 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="2" :push="1" class="iconback_center">
        <el-button circle @click="goBack">
          <svg-icon icon-class="back" class-name=""/>
        </el-button>
      </el-col>
      <el-col :span="2" :push="8">
        <div class="grid-content text-center">
          <el-dropdown @command="new_file">
            <el-button class="dropdown-btn">
              新建<svg-icon icon-class="add_files" class-name="dropdown-svg"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="new_file">在线新建文档</el-dropdown-item>
              <el-dropdown-item command="new_folder">新建文件夹</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="3" :pull="1">
        <div class="grid-content text-center">
          <el-dropdown @command="upload_file">
            <el-button class="dropdown-btn">
              上传<svg-icon icon-class="upload_file" class-name="dropdown-svg"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="up_file">
                <el-upload :on-progress="upFile_pro" :on-success="upFile_suc" :on-error="upFile_err" :show-file-list="showFileList" action="http://localhost:2333/file/upload" multiple>上传文件</el-upload>
              </el-dropdown-item>
              <el-dropdown-item command="up_folder">上传文件夹</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>

    <!-- 在线编写文档 主体 -->
    <el-dialog :visible.sync="richTextVisible" title="富文本编辑" @close="richTextRestore">
      <markdown :rich-text-info="richTextInfo" @add-file="addFile"/>
    </el-dialog>

    <!-- 在线新建文件夹 -->
    <el-dialog
      :visible.sync="floderVisible"
      title="提示"
      width="30%">
      <el-input v-model="floderName" placeholder="请输入文件夹的名字"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="crefloderClose">取 消</el-button>
        <el-button type="primary" @click="crefloderSure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 文件展示 -->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">

      <el-table-column type="selection" align="center" width="60" />

      <el-table-column align="center" label="名称" min-width="200">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.filename" class="edit-input" size="small"/>
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
          </template>
          <span v-else>{{ scope.row.filename }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.filetype }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="大小">
        <template slot-scope="scope">
          <span>{{ scope.row.filesize }}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="创建者">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="更新时间" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Actions" width="320px">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-back" circle/>
          <el-button v-if="scope.row.edit" type="success" icon="el-icon-check" circle @click="confirmEdit(scope.row)"/>
          <el-button v-else type="primary" icon="el-icon-edit" circle @click="scope.row.edit=!scope.row.edit"/>
          <el-button type="info" icon="el-icon-download" circle/>
          <el-button type="danger" icon="el-icon-delete" circle/>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 8px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 15px;
  }
</style>

<script>
import './index.scss'
// 引入mock数据
import list from '@/mock/article'
// 引入富文本编辑器--markdown
import Markdown from './markdown'
// 时间格式化
import { parseTime } from '@/utils/index.js'
import { setTimeout } from 'timers'

export default {
  // 当前页面暴露的名字, 例如 <inline-edit-table/>
  name: 'InlineEditTable',
  components: { Markdown },
  data() {
    return {
      // 表格列的集合
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      // 勾选状态 列表
      checkList: [],
      // 富文本编辑器显示状态
      richTextVisible: false,
      // 富文本内容
      richTextInfo: {
        title: '',
        body: ''
      },
      // 新建文件夹dialog显示状态
      floderVisible: false,
      // 新建文件夹的名字
      floderName: '',
      // 显示已上传的文件列表
      showFileList: false,
      // 文件上传中
      up_loading: false
    }
  },
  created() {
    this.getList()
    this.$message({
      message: `欢迎进入${this.$route.params.id}文件夹内`,
      type: 'warning'
    })
  },
  methods: {
    // 选中了'新建'操作的那个选项
    // param: @command -- command属性中的值
    new_file(command) {
      /**
       * 1.新建文档
       *
       * 2.新建文件夹
       */
      if (command === 'new_file') {
        // this.$message('click on item ' + command)
        this.richTextVisible = true
      } else {
        // this.$message('click on item ' + command)
        this.floderVisible = true
      }
    },
    // 选中了'上传'操作的那个选项
    upload_file(command) {
      /**
       * 1.新建文档
       *
       * 2.新建文件夹
       */
      if (command === 'up_file') {
        // this.$message('click on item ' + command)
      } else {
        this.$message('click on item ' + command)
      }
    },
    // 获取文章列表
    getList() {
      this.listLoading = true
      this.list = list.map(v => {
        // 触发视图更新
        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
        v.originalFilename = v.filename //  will be used when user click the cancel botton
        return v
      })
      this.listLoading = false
    },
    // 取消编辑
    cancelEdit(row) {
      row.filename = row.originalFilename
      row.edit = false
      this.$message({
        message: 'The title has been restored to the original value',
        type: 'warning'
      })
    },
    // 确认修改
    confirmEdit(row) {
      row.edit = false
      row.originalFilename = row.filename
      this.$message({
        message: 'The title has been edited',
        type: 'success'
      })
    },
    // 处理勾选状态
    handleSelectionChange(val) {
      this.checkList = val
    },
    // MD文本内容清空还原
    richTextRestore() {
      console.log('Dialog Close')
      this.richTextInfo.title = ''
      this.richTextInfo.body = ''
    },
    // 新建md文档
    addFile(newRecord) {
      // console.log(newRecord)
      this.$set(newRecord, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
      newRecord.originalFilename = newRecord.filename //  will be used when user click the cancel botton
      this.list.push(newRecord)

      // 关闭Dialog
      this.richTextVisible = false

      // 消息提示
      message({
        message: '创建成功',
        type: 'success',
        vue: this
      })
    },
    // 取消新建文件夹dialog
    crefloderClose() {
      this.floderName = ''
      this.floderVisible = false
    },
    // 确认新建文件夹dialog
    crefloderSure() {
      if (this.floderName === '') {
        return
      }
      // 添加一条文件操作
      this.list.push({
        filename: this.floderName,
        filetype: '.文件夹',
        filesize: '-',
        author: 'test',
        timestamp: parseTime(new Date()),
        content: []
      })

      this.floderVisible = false
      this.floderName = ''
      message({
        message: '创建成功',
        type: 'success',
        vue: this
      })
    },
    /**
     *  文件上传中
     */
    upFile_pro(event, file, fileList) {
      console.log('文件上传中...')
      this.up_loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.75)'
      })
    },
    /**
     *  文件上传完成
     */
    upFile_suc(response, file, fileList) {
      console.log(response, file)
      const pointIdx = (file.name).lastIndexOf('.')
      const name = file.name.slice(0, pointIdx)
      const suffix = file.name.slice(pointIdx)
      setTimeout(() => {
        message({
          message: '上传文件成功！',
          type: 'success',
          vue: this
        })
        // 添加一条数据
        this.list.push({
          filename: name,
          filetype: suffix,
          filesize: '-',
          author: 'test',
          timestamp: parseTime(new Date()),
          content: []
        })
        this.up_loading.close()
      }, 1200)
    },
    /**
     *  文件上传报错
     */
    upFile_err(err, file, fileList) {
      console.log(err)
      message({
        message: '上传文件成功！',
        type: 'error',
        vue: this
      })
      this.up_loading.close()
    },
    // 返回到上一条浏览记录
    goBack() {
      this.$notify({
        title: '提示',
        message: '返回至前一页',
        position: 'bottom-right',
        type: 'info'
      })
      this.$router.go(-1)
    }
  }
}

/**
 * 消息提示
 *
 * options -- Object，包括两个子属性
 *  message -- String，消息内容
 *  type    -- String，提示框类型
 *  ve      -- Object，this指向vue对象
 */
function message(options) {
  const { message, type = '', vue } = options
  vue.$message({
    message: message,
    type: type
  })
}
</script>
